import React, { useEffect } from 'react'
import { Modal, Form, Input, Button, Space, message } from "antd";

import { useAppDispatch } from "@/hooks";
import { postHospitalSetAsync } from "@/store/slice/hosp";

/* 
主要用到Modal组件  把这个组件封装出来
*/

type TModalProps = {
  isModalVisible: boolean,
  setIsModalVisible: React.Dispatch<React.SetStateAction<boolean>>,
  modalTitle: string,
  hospitalSetInfo: any
}

const HospitalModal = (props: TModalProps) => {
  const [form] = Form.useForm() // form实例化 为了实现清空表单效果
  // 创建dispatch
  const dispatch = useAppDispatch()


  useEffect(() => {
    // console.log(props.hospitalSetInfo); // 获取当前点击行 的数据
    // 判断添加还是修改
    if (props.hospitalSetInfo) {
      // setFieldValue  设置表单的值（该值将直接传入 form store 中。如果你不希望传入对象被修改，请克隆后传入
      form.setFieldsValue(props.hospitalSetInfo);//  初始化表单
    }
  }, [props.hospitalSetInfo])



  return (
    <Modal title={props.modalTitle}
      // 底部内容，当不需要默认底部按钮时，可以设为 footer={null}
      footer={null}
      visible={props.isModalVisible}
      // 点击蒙层是否允许关闭 默认是true
      maskClosable={false}
      // onOk={handleOk}
      // 点击遮罩层或右上角叉或取消按钮的回调 
      onCancel={() => {
        form.resetFields(); // 清空表单
        props.setIsModalVisible(false);
      }}
    >
      <Form
        form={form}
        name="basic"
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 19 }}
        // initialValues={{ remember: true }}
        // 点击提交
        onFinish={async values => {
          // console.log(values);
          await dispatch(postHospitalSetAsync(values)); // 请求添加接口
          form.resetFields();// 清空表单
          props.setIsModalVisible(false); //改变状态 让弹窗隐藏
          message.success(props.modalTitle + "设置成功");
        }}
        autoComplete="off"
      >


        {/* 不添加id 就无法解构出来 */}
        {<Form.Item
          name="id"
          hidden // 隐藏域
        >
          <Input />
        </Form.Item>}



        <Form.Item
          label="医院名称"
          name="hosname"
          rules={[{
            required: true,
            min: 2,
            max: 20,
            message: '请输入医院名称!长度为2-15'
          }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="医院编号"
          name="hoscode"
          rules={[{
            required: true,
            message: '请输入医院编号'
          }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="API基础地址"
          name="apiUrl"
          rules={[{
            required: true,
            pattern: /^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?[a-zA-Z0-9_-](\?)?)*)*$/i,
            message: '请输入正确的API基础地址'
          }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="联系人姓名"
          name="contactsName"
          rules={[{
            required: true,
            message: '请输入正确的联系人姓名'
          }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="联系人手机"
          name="contactsPhone"
          rules={[{
            required: true,
            pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            message: '请输入正确的联系人手机'
          }]}
        >
          <Input />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 5, span: 19 }}>
          <Space>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
            <Button htmlType="button" onClick={() => {
              form.resetFields();// 清空表单
            }}>
              清空
            </Button>
          </Space>

        </Form.Item>
      </Form>
    </Modal>
  )
}

export default HospitalModal